<template>
  <div class="box">
    <div class="container" v-if="Object.keys(activity).length>0">
      <!--轮播图-->
      <div class="swiper">
        <van-image fit="cover" width="100%" height="100%" :src="activity.mainImage"/>
      </div>
      <!--价格bar-->
      <div class="priceBar">
        <div class="priceBarTop">
          <div class="price">
            <div class="t1">￥<span>{{ dealPrice(activity.priceList) }}</span></div>
            <div class="t2">{{ statusObj[activity.status]}}</div>
          </div>
          <div class="time">
            <div class="txt" v-if="activity.status == '02'">活动未开始</div>
            <div class="txt" v-if="activity.status == '03'">活动已暂停</div>
            <div class="txt" v-if="activity.status == '04'">活动已结束</div>
            <div class="txt" v-if="activity.status == '01'">距报名结束</div>
            <div class="clockRun" v-if="activity.status == '01'">
              <van-count-down :time="enrollEndTime.time">
                <template #default="timeData">
                  <span class="time_block">{{enrollEndTime.asDays}}</span>天
                  <span class="time_block">{{ timeData.hours }}</span>
                  <span class="colon">:</span>
                  <span class="time_block">{{ timeData.minutes }}</span>
                  <span class="colon">:</span>
                  <span class="time_block">{{ timeData.seconds }}</span>
                </template>
              </van-count-down>
            </div>
          </div>
        </div>
        <div class="priceBarBottom">
          <div class="card-content-title">{{activity.name}}</div>
          <div class="card-content-time">
            <van-icon name="clock-o" style="margin-right: 4px"/>
            {{dealTime(activity.startTime)}} 至 {{dealTime(activity.endTime)}}
          </div>
          <div class="card-content-view">
            <div class="number"><van-icon name="eye-o" />{{activity.viewCount || 0 }}</div>
            <div class="number"><van-icon name="guide-o" />{{activity.forwardCount || 0 }}</div>
            <div class="number" v-if="activity.enrollShow == '1'"><van-icon name="friends-o" />{{activity.enrollment || 0 }}</div>
          </div>
        </div>
      </div>
      <!--报名流程-->
      <!--活动详情-->
      <van-divider solid>活动详情</van-divider>
      <div class="activityDetails">
        <van-empty v-if="activity.details == null" image="search" description="暂无活动详情"/>
        <div v-else v-html="activity.details"></div>
      </div>
    </div>
    <van-skeleton class="skeletonBox" title :row="5" v-else />
    <div class="footer">
      <div class="l-link">
        <router-link :to="{name: 'Main'}" class="toHome">
          <van-icon name="wap-home"/>
          <span>首页</span>
        </router-link>
      </div>
      <div class="r-enroll">
        <van-button type="warning" @click="onSubmit" :disabled="activity.status !== '01'">立即报名</van-button>
      </div>
    </div>
    <!-- 选择活动价格弹窗-->
    <van-popup v-model="enrollShow" position="bottom" :overlay="true">
      <div class="selectBox">
        <div class="top">
          <div class="title">请选择</div>
          <div class="close" @click="enrollShow = false">
            <van-icon name="close"/>
          </div>
        </div>
        <div class="content">
          <van-radio-group v-model="enrollRadio">
            <van-cell-group>
              <van-cell v-for="(item,index) in priceList" :key="index" :title="item.name" clickable @click="enrollRadio=index">
                <div class="price">￥{{ item.money }}</div>
                <van-radio :name="index"/>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
          <div class="stepBox flex">
            <span>输入数量</span>
            <van-stepper v-model="count"/>
          </div>
        </div>
        <van-submit-bar
          :price="totalFee"
          button-text="下一步"
          @submit="nextStep"
        />
      </div>
    </van-popup>
  </div>
</template>

<script>
import {wxcallback, getweixinCode} from '../assets/js/func.js'
import {mapMutations, mapState} from 'vuex'
import moment from 'moment'
import _ from 'lodash'
import wx from 'weixin-js-sdk'
export default {
  name: 'NcGoodsInfo',
  data () {
    return {
      activity: {},
      curActivityId: 0,
      enrollShow: false,
      enrollRadio: 0,
      count: 1,
      priceList: []
    }
  },
  computed: {
    ...mapState(['activityId', 'statusObj']),
    enrollEndTime () {
      let time = 0
      let asDays = 0
      if (this.activity.enrollEndTime) {
        // 默认单位毫秒
        time = moment(this.activity.enrollEndTime).diff(new Date())
        if (time > 0) {
          const d = moment.duration(time)
          asDays = Math.floor(d.asDays())
        }
      }
      return {
        time: time,
        asDays: asDays
      }
    },
    unitPrice () {
      if(this.priceList && this.priceList.length > 0){
        return Number(this.priceList[this.enrollRadio].money)
      }
      return 0
    },
    totalFee () {
      return this.unitPrice * this.count * 100 || 0
    }
  },
  watch: {
    activityId: {
      handler () {
        this.queryMainProductMix()
      },
      deep: true,
      immediate: true
    }
  },
  activated () {
    wxcallback()
    this.queryViewCount()
    this.weiShare()
    this.count =1
    this.enrollShow=false

  },
  methods: {
    ...mapMutations(['setPriceList']),
    queryMainProductMix () {
      this.priceList = []
      this.curActivityId = +this.$route.query.activityId
      this.$http.post('/activity/findById', this.curActivityId).then(res => {
        if (res.state == '200') {
          this.activity = _.get(res, 'data.activity', {})
          const priceList = _.get(res, 'data.activity.priceList')
          if(priceList && priceList.length>0){
            this.priceList = priceList
          }
          this.weiShare()
        }else{
          this.$toast(res.message)
        }
      })
    },
    weiShare(){
      wx.ready(()=>{
        let _this = this
        const shareData = {
          title: _this.activity.name,
          desc: '快来一起报名吧',
          link: location.href,
          imgUrl: _this.activity.mainImage,
          success: function() {
            _this.$http.post('/activity/forwardCount', _this.curActivityId).then(res => {
              console.log('分享+1')
            })
          },
          cancel: function (){
            alert('已取消分享')
          }
        }
        //"weixin-js-sdk": "^1.3.2"
        wx.onMenuShareAppMessage(shareData)
        wx.onMenuShareTimeline(shareData)
      })
    },
    queryViewCount(){
      this.curActivityId = +this.$route.query.activityId
      this.$http.post('/activity/viewCount', this.curActivityId).then(res => {
        console.log('浏览+1')
      })
    },
    openEnrollPopup(){
      //免费课程直接跳到下一步
      if(this.activity.isFree == '0'){
        this.$router.push({
          name: 'Information',
          query: {
            activityId: this.curActivityId,
            count: 1,
            unitPrice: 0,
            totalFee: 0,
            priceIndex: 0,
            isFree:'0',
          }
        })
      }else{
        this.enrollShow = true
      }
    },
    onSubmit () {
      if (!localStorage.getItem('openId')) {
        getweixinCode()
      } else {
        this.openEnrollPopup()
      }
    },
    dealPrice (priceList) {
      let price = 0
      if (priceList && priceList.length > 0) {
        price = priceList[0].money
      }
      return price.toFixed(2)
    },
    dealTime (time) {
      return time && time.substr(0, time.length - 3)
    },
    nextStep () {
      // 跳转填写信息
      this.setPriceList(this.priceList)
      this.enrollShow = false
      setTimeout(() => {
        this.$router.push({
          name: 'Information',
          query: {
            activityId: this.curActivityId,
            count: this.count,
            unitPrice: this.unitPrice,
            totalFee: this.totalFee,
            priceIndex: this.enrollRadio,
            isFree:'1',
          }
        })
      }, 500)
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.box .container {
  flex: 1 1 auto;
  background-color: #f1f1f1;
  overflow-y: auto;
}

.skeletonBox{
  flex: 1 1 auto;
  background-color: #fff;
  padding: 20px;
}

.box .footer {
  height: 55px;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  border-top: 1px solid #f1f1f1;
  padding: 8px 0;
  /*background-color: #f1f1f1;*/
}

.priceBar {
  position: relative;
  background-color: #fff;
}

.shareBox{
  border-radius: 15px;
  padding: 15px;
}
.shareBox /deep/ .van-cell__title{
  flex: 2;
  color: #ff3926;
}
.shareBox /deep/ .van-cell__value{
  flex: 1;
  justify-content: flex-end;
}
.priceBar .priceBarTop {
  height: 60px;
  background: linear-gradient(left, rgba(255, 30, 40, 1) 10%, rgba(255, 90, 35, 1) 50%);
  color: #fff;
  display: flex;
  justify-content: space-between;
}

.priceBar .priceBarTop .price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 15px;
}

.priceBar .priceBarTop .price .t1 {
  font-size: 12px;
}

.priceBar .priceBarTop .price .t1 span {
  font-size: 18px;
  font-weight: 600;
}

.priceBar .priceBarTop .price .t2 {
  font-size: 12px;
}

.priceBar .priceBarTop .time {
  width: 55%;
  padding-right: 15px;
  background: url('../assets/img/top_bg_2.png') no-repeat left top / auto 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.priceBar .priceBarTop .time .txt {
  color: #f20000;
  margin-bottom: 4px;
}

.priceBar .priceBarTop .time .clockRun /deep/ .van-count-down {
  color: #f20000;
  font-size: 12px;
  display: flex;
  align-items: center;
}

.priceBar .priceBarTop .time .clockRun .time_block {
  display: inline-block;
  font-size: 12px;
  color: #fff;
  border-radius: 2px;
  padding: 2px;
  margin: 0 2px;
  line-height: 1;
  background-color: #f20000;
}

.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}

.stepBox {
  background-color: #fff;
  padding: 15px;
  margin-top: 15px;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.priceBarBottom .card-content-title {
  font-size: 16px;
  font-weight: 600;
  padding: 12px;
}

.priceBarBottom .card-content-time {
  padding: 0px 12px 12px 12px;
  color: #777;
}
.priceBarBottom .card-content-view{
  display: flex;
  align-items: center;
  padding: 0px 12px 12px 12px;
  justify-content: flex-start;
  .number{
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-right: 10%;
    .van-icon{
      font-size: 16px;
      margin-right: 5px;
    }
  }
}
/*左侧跳转*/
.box .footer .l-link {
  flex: 1;
  display: flex;
  justify-content: center;
}

.box .footer .l-link .toHome {
  color: #333333;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box .footer .l-link .toHome i {
  font-size: 20px;
}

/*右侧报名按钮*/
.box .footer .r-enroll {
  flex: 1;
  width: 180px;
  height: 100%;
  padding: 0px 12px;
}

.box .footer .r-enroll .van-button {
  width: 100%;
  height: 100%;
  border-radius: 100px;
  background-color: #fcd64f;
  border-color: #fcd64f;
  color: #72400b;
}

/deep/ .van-button__text {
  display: flex;
  align-items: center;
}

.swiper {
  width: 100%;
  height: 200px;
}

.activityDetails{
  margin-top: 15px;
  padding: 12px;
  background-color: #fff;
  /deep/ *{
    margin: 0 0 6px 0;
    font-size: 14px;
  }
  /deep/ p{
    text-indent: 2em;
    display: block;
  }
  /deep/ img{
    display: block;
    width: 100%;
  }
}

/**/
.selectBox {
  height: 500px;
  background-color: #f1f1f1;
}

.selectBox .top {
  height: 50px;
  display: flex;
  align-items: center;
  position: relative;
}

.selectBox .top .title {
  flex: 1 1 auto;
  text-align: center;
  font-size: 18px;
}

.selectBox .top .close {
  position: absolute;
  right: 15px;
  font-size: 20px;
}

/deep/ .van-cell__title {
  flex: 3;
}

/deep/ .van-cell__value {
  flex: 2;
  display: flex;
  align-items: center;
}

/deep/ .van-cell__value .price {
  flex: 1 1 auto;
  padding-right: 10px;
  text-align: right;
}

/deep/ .van-cell__value .van-radio {
  flex-shrink: 0;
}

</style>
